<template>
	<cu-custom bgColor="bg-gradual-blue">
		报名页面
		<template #right>
			<view class="margin-right" @click="toProfile">个人信息</view>
		</template>
	</cu-custom>
	<view class="main-body" >
		<a-result status="warning" title="必须在校园网内才能报名" v-if="!inXmuNetwork" />
		<a-result status="warning" title="没有正在报名中的考试" v-else-if="!examExists" />
		<div id="dashboard" v-else>
			<!-- <view class="bg-blue">
					<view class="flex padding align-center" >
						<view>
							<text class="text-xl block margin-bottom-xs">{{ app.currentUser.RealName }}</text>
							<text>工号：{{ app.currentUser.Code }}</text>
						</view>
					</view>
				</view> -->
			<view class="padding radius text-left shadow-blur bg-blue margin-xs">
				<view class="text-lg">{{ exam.Name }}</view>
				<view class="margin-top-sm text-Abc">
					报名时间：{{ rangeToDisplay(exam.Application) }}
				</view>
				<view class="margin-top-sm text-Abc">
					考试时间：{{ exam.Examing }}
				</view>
				<view class="margin-top-sm text-Abc">
					思明校区剩余人数：{{ exam.SiMingRemain }} 人
				</view>
				<view class="margin-top-sm text-Abc">
					翔安校区剩余人数：{{ exam.XiangAnRemain }} 人
				</view>
				<view class="margin-top-sm text-Abc" v-if="isZhangZhouEnable">
					漳洲校区剩余人数：{{ exam.ZhangZhouRemain }} 人
				</view>
			</view>
			<view class="application-wrapper">
				<a-result v-if="isInBlackList" status="warning" title="因特殊情况，无法报名"></a-result>
				<app-form class="margin-bottom" v-else-if="!showResult && canApplicate" @onSubmit="onSubmit" :isInWhiteList="isInWhiteList"></app-form>
				<ShowApp class="margin-bottom" v-else-if="showApplication && application.ID !== app.GUID_EMPTY"
					@onSubmit="hideApp" />
				<a-result status="warning" title="已经不能再报名了"
					v-else-if="!canApplicate && application.ID === app.GUID_EMPTY"></a-result>
				<a-result status="success" title="提交成功" v-else>
					<template #subTitle>
						您已提交了{{ app.toText('校区', application.CampusCode) }}{{ app.toText('科目级别', application.Level) }}的监考报名表
						<view class="text-center margin-top">
							请以监考通知单安排为准
						</view>
					</template>
					<template #extra>
						<button class="margin-lr" type="primary" @click="showResult = false"
							v-if="canApplicate">修改报名表</button>
						<button class="margin" type="primary" @click="getNotice" v-if="exam.SigningDate">查看监考通知</button>
						<button class="margin-lr" @click="showApplication = true"
							v-if="!canApplicate && application.ID !== app.GUID_EMPTY">查看报名表</button>
					</template>
					<div class="desc" style="margin: 0 auto;">
						<p class="text-lg margin-t">
							<strong>以下显示的是您的监考信息:</strong>
						</p>
						<p class="margin-tb-sm">
							预选考场：<span>{{ application.Preselection ? application.Preselection : "未预选" }}</span>
						</p>
						<p class="margin-tb-sm">
							CET4级考场：<span>{{ application.Cet4Room && exam.SigningDate ? application.Cet4Room : "未分配" }}</span>
						</p>
						<p class="margin-tb-sm">
							CET6级考场：<span>{{ application.Cet6Room && exam.SigningDate ? application.Cet6Room : "未分配" }}</span>
						</p>
					</div>
				</a-result>
			</view>
		</div>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		provide,
		onMounted,
		reactive,
		watch
	} from 'vue';
	import app from '../../app';
	import axios from '@/axios';
	import {
		rangeToDisplay
	} from '../exams/utils';
	import appForm from './application.vue'
	import ShowApp from './show-application.vue'
	import { logout } from '@/configs/useCurrentUser'
	import { getDictionary, dictVersion } from '../../utils/useDictionary'
	
	function toProfile () {
		uni.redirectTo({
			url: "/pages/profile/index"
		})
	}
	
	const inXmuNetwork = ref(false);
	const examExists = ref(false);
	const exam = reactive({
		Cet4Remain: 0,
		Cet6Remain: 0
	});
	const buildings = ref([]);
	const application = reactive({});
	const showResult = ref(false);
	const showApplication = ref(false);
	const isInBlackList = ref(true);
	const isInWhiteList = ref(false);
	const canApplicateByServer = ref(false);
	const canApplicate = computed(_ => {
		const mustInApplicate = (exam.Status === 1); // 报名中状态
		const now = (new Date()).valueOf();
		const range = exam.Application.split('-');
		let mustInTimeRange = (range.length === 2 && now >= range[0] && now < range[1]);
		// let result = canApplicateByServer.value && mustInApplicate && mustInTimeRange && (exam.SiMingRemain > 0 || exam.XiangAnRemain > 0 || 
		// 	exam.ZhangZhouRemain > 0);
		let result = canApplicateByServer.value || (mustInApplicate && mustInTimeRange && (exam.SiMingRemain > 0 || exam.XiangAnRemain > 0 || 
			exam.ZhangZhouRemain > 0 || application.ID !== app.GUID_EMPTY));
		return result;
	});
	const isZhangZhouEnable = ref(false);
	watch(dictVersion, (ov, nv) => {
		isZhangZhouEnable.value = getDictionary("校区", "漳州校区").entries[0].Enable
	});
	provide("exam", exam);
	provide("buildings", buildings);
	provide("application", application);

	// --- 读取数据
	async function loadData() {
		let msg = await axios.post("/api/exams/GetExamOnApplicating");
		if (!msg.success && msg.msg === "必须在厦大内网才能访问此接口") {
			inXmuNetwork.value = false;
			return;
		} else {
			inXmuNetwork.value = true;
		}

		if (!msg.success && msg.msg === "所选择的考试不存在") {
			examExists.value = false;
			return;
		} else {
			examExists.value = true;
		}

		showResult.value = msg.success && msg.application && msg.application.ID !== app.GUID_EMPTY
		isInBlackList.value = msg.isInBlackList;
		isInWhiteList.value = msg.isInWhiteList;
		canApplicateByServer.value = msg.canApplicate;
		
		Object.assign(exam, msg.data);
		buildings.value = msg.Buildings;
		Object.assign(application, msg.application);
	}
	loadData();

	async function onSubmit() {
		showResult.value = true;
		await loadData();
	}

	async function hideApp() {
		showApplication.value = false;
	}

	function getNotice() {
		uni.navigateTo({
			url: `/pages/index/notice?examId=${exam.ID}&appId=${application.ID}`
		})
	}
</script>

<style>
	.ml-auto {
		margin-left: auto;
	}
</style>